<template>
  <div class="line-chart" ref="linechart" :style="styleObj"></div>
</template>

<script>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
export default {
  name: "LineChart",
  props:{
    xlabel:{
      type: Array
    },
    data:{
      type: Array
    },
    legend:{
      type: Array
    },
    height:{
      type: String,
      default: '600px'
    },
    width:{
      type: String,
      default: '100%'
    }
  },
  setup(props) {
    const linechart = ref(null);
    
    const {xlabel,data,legend,height,width} = props

     const styleObj = {
      height: height,
      width: width
    }


    const option = {
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: legend
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: xlabel,
      },
      yAxis: {
        type: "value",
      },
      series: data,
    };

    onMounted(()=>{
        const chart = echarts.init(linechart.value);
        chart.setOption(option)
        window.addEventListener('resize', function () { 
            chart.resize()
        })
    })

    return { linechart,styleObj };
  },
};
</script>

<style>
</style>